<template>
  <div class="tools-container" :class="{ dark: theme === 'dark-theme' }">
    <div class="title">
      <span style="margin-right: 15px">组件属性</span>
      <a
        :href="component['__config__'].document"
        target="_blank"
        v-if="component['__config__'] && component['__config__'].document"
        style="margin-right: 10rem"
      >
        组件文档
      </a>
      <!-- <template v-if="viewType === 'drag'">
        开启拖动
        <el-switch v-model="lock" @change="$emit('lock', lock)"></el-switch>
      </template> -->
    </div>
    <div class="main">
      <el-scrollbar>
        <component
          :is="component.echarts ? 'echartsComponent' : component.type"
          style="max-height: 100vh"
        ></component>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
const allComponents = require.context('./components', true, /.vue$/);
let resComponents = {};

allComponents.keys().forEach((fileName) => {
  let comp = allComponents(fileName);
  const a = fileName.replace(/^\.\/(.*)\.\w+$/, '$1');
  resComponents[a.split('/')[1]] = comp.default;
});
export default {
  name: 'ToolsContainer',
  components: resComponents,
  props: {},
  computed: {
    ...mapGetters(['component', 'viewType', 'theme'])
  },
  data() {
    return {
      lock: false
    };
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.tools-container {
  padding-right: 10px;
  // background-color: #fff;
  height: 100%;
  &.dark {
    background-color: transparent;
    color: #fff;
    a {
      color: #fff;
    }
    ::v-deep {
      .el-form-item__label {
        color: #fff;
      }
      .el-tabs__item {
        color: #fff;
        &.is-active {
          text-shadow: 0 0 5px white, 0 0 10px #00ffff, 0 0 15px #7fff00,
            0 0 20px white;
        }
      }
    }
  }
  .params-box {
    ::v-deep {
      .el-form-item {
        margin-right: 10px;
      }
    }
  }
  .title {
    margin-bottom: 15px;
    font-size: 16px;
  }
  .main ::v-deep {
    .params-box {
      .list-cell {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        &.switch {
          margin-bottom: 20px;
        }
        .label {
          margin-right: 15px;
          width: 20%;
          text-align: right;
          font-size: 14px;
        }
        .cell {
          flex: 1;
          color: #409eff;
        }
      }
    }
  }
}
</style>